<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table,
        tr,
        td,
        th {
            border: 1px solid #dedede;
        }
        
        tr {
            height: 50px;
            line-height: 50px;
        }
        
        td>input {
            width: 85%;
            border: 1px solid #dedede;
        }
        
        table {
            margin: 100px auto;
        }
        
        th {
            width: 100px;
        }
        
        .tfoo {
            position: relative;
        }
        
        .tfoo:after {
            content: '名称不能为空';
            position: absolute;
            width: 80px;
            height: 10px;
            color: red;
            top: -10px;
            right: 0px;
            font-size: 12px;
        }
        
        .llo {
            position: relative;
        }
        
        .llo:after {
            content: '名称重复';
            position: absolute;
            width: 60px;
            height: 10px;
            color: red;
            top: -10px;
            right: 0px;
            font-size: 12px;
        }
        
        .lloG {
            position: relative;
        }
        
        .lloG:after {
            content: '地址不能为空';
            position: absolute;
            width: 80px;
            height: 10px;
            color: red;
            top: -10px;
            right: 0px;
            font-size: 12px;
        }
		.lloGoo {
		    position: relative;
		}
		
		.lloGoo:before {
		    content: '名称长度不能超过10';
		    position: absolute;
		    width: 120px;
		    height: 10px;
		    color: red;
		    top: -10px;
		    left: 45px;
		    font-size: 12px;
		}
    </style>
</head>


<body>
    <form id="maintainForm" action="/videoManager/edit" method="post">
        <table class="zTable addTable marTopNone" style="overflow:scroll;" border="0" cellspacing="0" cellpadding="0">
            <thead>
                <!-- <tr>
                    <h1 class="agenciesName">机构名称</h1>
                </tr> -->
            </thead>
            <tbody style="margin-top: 40px;">
                <input type="hidden" name="id" value="${video.id}">
                <tr id="llo1">
                    <th rowspan="2" colspan="2">线路一</th>
                    <td colspan="3" class='lloFirst'>
                 名称：<input type="text" id="line0" name="line1" style="width: 300px" class="t" oninput="checkLength($(this))" onblur="checkName(this)" onfocus="hide($(this))" />
                    </td>
                    <th rowspan="2" colspan="2">线路二</th>
                    <td colspan="3" class='lloFirst'>
                名称：<input type="text" id="line1" name="line2" style="width: 300px" class="t" oninput="checkLength($(this))" onblur="checkName(this)" onfocus="hide($(this))" />
                    </td>
                </tr>
                <tr id="llo1-1">
                    <td colspan="3">网址：<input type="url" id="url-line0" name="url1" onfocus="hideG($(this))" onblur="show($(this))" /></td>
                    <td colspan="3">网址：<input type="url" id="url-line1" name="url2" onfocus="hideG($(this))" onblur="show($(this))" /></td>
                </tr>

                <tr id="llo2">
                    <th rowspan="2" colspan="2">线路三</th>
                    <td colspan="3" class='lloFirst'>名称：<input type="text" id="line2" name="line3" class="t" oninput="checkLength($(this))" onblur="checkName(this)" onfocus="hide($(this))" />
                    </td>
                    <th colspan="2" rowspan="2">线路四</th>
                    <td colspan="3" class='lloFirst'>名称：<input type="text" id="line3" name="line4" class="t" oninput="checkLength($(this))" onblur="checkName(this)" onfocus="hide($(this))" />
                    </td>
                </tr>
                <tr id="llo2-2">
                    <td colspan="3">网址：<input type="text" id="url-line2" onfocus="hideG($(this))" onblur="show($(this))" /> </td>
                    <td colspan="3">网址：<input type="text" id="url-line3" name="url4" onfocus="hideG($(this))" onblur="show($(this))" /></td>
                </tr>
                <tr id="llo3">
                    <th colspan="2" rowspan="2">线路五</th>
                    <td colspan="3" class='lloFirst'>名称：<input type="text" id="line4" name="line5" class="t" oninput="checkLength($(this))" onblur="checkName(this)" onfocus="hide($(this))" />
                    </td>
                    <th colspan="2" rowspan="2">线路六</th>
                    <td colspan="3" class='lloFirst'>名称：<input type="text" id="line5" name="line6" class="t" oninput="checkLength($(this))" onblur="checkName(this)" onfocus="hide($(this))" />
                    </td>
                </tr>
                <tr id="llo3-3">
                    <td colspan="3">网址：<input type="text" id="url-line4" name="url5" onfocus="hideG($(this))" onblur="show($(this))" /></td>
                    <td colspan="3">网址：<input type="text" id="url-line5" name="url6" onfocus="hideG($(this))" onblur="show($(this))" /></td>
                </tr>

            </tbody>
        </table>
    </form>
</body>
<script src="./jquery-3.3.1.js"></script>

<script type="text/javascript">
    function hide(e) {
        if ($(e).parent().hasClass('llo')) {
            $(e).parent().removeClass('llo');
            $(e).css({
                "border": '1px solid #dedede'
            })
        } else if ($(e).parent().hasClass('tfoo')) {
            $(e).parent().removeClass('tfoo');
            $(e).css({
                "border": '1px solid #dedede'
            })
        }
    }
 function checkLength(e){
	  // console.log($(e).val());
	  if($(e).val().length>10){
		  $(e).parent().addClass('lloGoo');
		  
		  $(e).css({
		      "border": '1px solid red','outline':'none'
		  });
	  }else{
		  if($(e).parent().hasClass('lloGoo')){
			  $(e).parent().removeClass('lloGoo');
			  $(e).css({
			      "border": '1px solid #dedede'
			  })
		  }
	  }
 }
    function show(e) {
        if ($(e).val() == '') {
            var name = $(e).attr('id').split('-');

            if ($("#" + name[1]).val() != '') {

                $(e).parent().addClass('lloG');

                $(e).css({
                    "border": '1px solid red'
                });
            }
        } else {
            var name = $(e).attr('id').split('-');
            if ($("#" + name[1]).val() == '') {
                $("#" + name[1]).parent().addClass('tfoo');
                $("#" + name[1]).css({
                    "border": '1px solid red'
                });
            }
        }
    }
    function hideG(e) {
        if ($(e).parent().hasClass('lloG')) {

            $(e).parent().removeClass('lloG');
            $(e).css({
                "border": '1px solid #dedede'
            })
        }
    }
    function checkName(data) {
        var values = [];
        $(".t").each(function(i, item) {
            var value = $(this).val();
            console.log(value);
            // if (value != '') {
            values.push(value); //获取所有的名称
            // }
        });
        console.log(values);
        var val = $(data).val(); //获得当前输入框的值
        if (val != '') {
            var ht = $(data).attr('id');
            if ($('#url-' + ht).val() == '') {
                $('#url-' + ht).parent().addClass("lloG");
                // console.log($('#url-' + ht));
                $('#url-' + ht).css({
                    "border": '1px solid red'
                });
            }
            // console.log($(data).attr('id'));
        } else {
            var ht = $(data).attr('id');
            $('#url-' + ht).parent().removeClass("lloG");
            $('#url-' + ht).val("");
            $('#url-' + ht).css({
                "border": '1px solid #dedede'
            });
        }
        $('td').removeClass('llo');
        $('.lloFirst>input').css({
            'border': '1px solid #dedede'
        });
        llogg(values);
    }
    function llogg(arr) {
        var list = [];
        for (var i = 0; i < arr.length; i++) {
            var hasRead = false;
            for (var k = 0; k < list.length; k++) {
                if (i == list[k]) {
                    hasRead = true;
                }
            }
            if (hasRead) {
                break;
            }
            var _index = i,
                haveSame = false;
            for (var j = i + 1; j < arr.length; j++) {
				if(arr[i]!=''){
					if (arr[i] == arr[j]) {
					    list.push(j);
					    _index += "," + j;
					    haveSame = true;
					}
					}
                
            }
            if (haveSame) {
                if (arr[i] == '') {
                    return false;
                }
                // alert("数组中值为" + arr[i] + "相同元素的下标为" + _index);
                var index = _index.split(',');
                console.log(index);
                index.forEach((item) => {
                    $('#line' + item).parent().removeClass('llo');
                    $('#line' + item).css({
                        "border": '1px solid #dedede'
                    });
                    $('#line' + item).parent().addClass('llo');
                    $('#line' + item).css({
                        "border": '1px solid red'
                    });
                    // console.log($('#line' + item));
                })

            }
        }
    }
</script>

</html>